<template>
  <div class="app-container">
    <el-form ref="formEntity" :model="formEntity" :rules="rules" label-width="80px">
      <el-form-item label="业务标语" prop="articleTitle">
        <el-input v-model="formEntity.articleTitle" placeholder="请输入标语"/>
      </el-form-item>
      <el-form-item label="简介" prop="articleDescribe">
        <editor v-model="formEntity.articleDescribe" :min-height="100"/>
      </el-form-item>
      <el-form-item label="业务展示图" prop="articleLogo">
        <image-upload
          v-model="formEntity.articleLogo"
          @input="uploadSuccess"
          action="/minio/upload"
          :limit="1"
          :fileSize="2"/>
      </el-form-item>
      <el-form-item label="显示" prop="isDisplay">
        <el-radio-group v-model="formEntity.isDisplay">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="业务描述" prop="articleContent">
        <!-- <editor v-model="formEntity.articleContent" :min-height="192"/> -->
        <!-- <my-ai-ditor v-model="formEntity.articleContent" :min-height="192"/> -->
        <MyAiEditor v-model="formEntity.articleContent" :min-height="192"/>
      </el-form-item>
      <!-- <el-form-item label="扩展字段">
        <el-input v-model="formEntity.extendField" type="textarea" placeholder="请输入内容" />
      </el-form-item> -->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
    </div>
  </div>
</template>

<script>
import {getOneArticle, saveArticle} from "@/api/system/frontAdmin"
import {listData} from "@/api/system/dict/data"

export default {
  name: "FrontMenu",
  data() {
    return {
      // 遮罩层
      module:'合作伙伴',
      loading: true,
      // 是否显示弹出层
      open: false,
      // 表单校验
      rules: {
        articleTitle: [
          {required: true, message: "业务说明不能为空", trigger: "blur"}
        ],
        articleDescribe: [
          {required: true, message: "业务简介不能为空", trigger: "blur"}
        ],
        articleLogo: [
          {required: true, message: "展示图不能为空", trigger: "blur"}
        ],
        articleContent: [
          {required: true, message: "业务展示信息不能为空", trigger: "blur"}
        ]
      },
      menuDict: {
        dictCode: '',
        dictLabel: '',
        dictValue: '',
        dictType: '',
      },
      formEntity: {
        id: null,
        frontMenuId: null,
        frontMenuName: '公司简介',
        articleTitle: '',
        articleDescribe: '',
        articleLogo: '',
        isDisplay: 1,
        sort: 1,
        articleContent: '',
        articleVideo: '',
        extendField: ''
      }
    }
  },
  created() {
    this.query()
  },
  methods: {
    uploadSuccess(images) {
      this.formEntity.articleLogo = images
    },
    uploadVideoSuccess(videoUrl) {
      console.log('uploadVideoSuccess:', videoUrl)
      this.formEntity.articleVideo = videoUrl
    },
    /** 查询菜单数据 */
    query() {
      this.loading = true
      let that = this
      listData({'dictType': 'article_menu_association', 'dictLabel': this.module}).then(response => {
        const rows = response.rows
        that.menuDict = rows ? rows[0] : {}
        getOneArticle(that.menuDict.dictValue).then(response => {
          that.formEntity = response.data || this.initFormEntity()
        })
      })
    },
    initFormEntity() {
      return {
        id: null,
        frontMenuId: this.menuDict.dictValue,
        frontMenuName: this.module,
        articleTitle: this.module,
        articleDescribe: '',
        articleLogo: '',
        isDisplay: 1,
        sort: 1,
        articleContent: '',
        articleVideo: '',
        extendField: ''
      }
    },

    // 表单重置
    reset() {
      this.formEntity = {
        id: null,
        frontMenuId: null,
        frontMenuName: this.module,
        articleTitle: '',
        articleDescribe: '',
        articleLogo: '',
        isDisplay: 1,
        sort: 1,
        articleContent: '',
        articleVideo: '',
        extendField: ''
      }
      this.resetForm("formEntity")
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["formEntity"].validate(valid => {
        if (valid) {
          saveArticle(this.formEntity).then(response => {
            this.$modal.msgSuccess("保存成功")
            this.query()
          })
        }
      })
    },
  }
}
</script>
